<template>
	<view class="zone">
		<Header title="集字领红包" color="#fff" :headertype="3"></Header>
		<view class="mian">
			<view class="box">
				<view class="top">
					<view class="left">
						<p>集齐 “<text>潮玩大冒险</text>” 兑换现金</p>
						<p>可兑换： <text>66666</text> 大米</p>
					</view>
					<image class="posaimg" src="http://img.cpgm.cc/panda/static/lucky/redbag.png" mode="widthFix" />
				</view>
				<view class="line"></view>
				<view class="bottom">
					<view v-for="(item , index) in listdata" :key="index">
						<image :class="[item.num==0?'gre':'']" :src="'http://img.cpgm.cc/panda/static/invite/' + (index + 1) + '.png'" mode="widthFix" />
						<!-- <text>{{item.num==0?'未获得':'已获得'}}</text> -->
					</view>
				</view>	
				<view class="button"  @click="exchange(33)">立即兑换</view>
			</view>
		</view>
		
	</view>
</template>

<script>

	export default {
		data() {
			return {
				list:[
					{
						id:1,
						image:'w1.png',
						num:0
					},
					{
						id:2,
						image:'w2.png',
						num:0
					},
					{
						id:3,
						image:'w3.png',
						num:0
					},
					{
						id:4,
						image:'w4.png',
						num:0
					},
					{
						id:5,
						image:'w5.png',
						num:0
					},
				],
				show:true,
				listdata:[],
			};
		},
		onLoad(){
			this.myPics();
		},
		methods: {
			// 获取我的图鉴
			async myPics (){
				let res = await this.$http.index.myPics({
					type:3
				});
				this.listdata = res.data
			},

			// 图鉴兑换
			async exchange(id){
				let res = await this.$http.index.inviteexchange({
					id:id
				})
				this.$u.toast(res.msg)
				if(res.code == 1) {
					this.myPics();
				}
			},
		},
	}
</script>

<style lang="less">
.zone {
	background: linear-gradient(180deg, #00684B 0%, rgba(0,106,74,0) 30%) #171A1F;
	background-size: 100% 100%;
	min-height: 100vh;
}

.mian {
	padding: 8vh 10px 10px;

}
.box {
	background: rgba(0, 103, 75, 0.51);
	border-radius: 7px;
	padding: 10px;
	position: relative;
}


.top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

}

.posaimg {
	width: 125px;
	margin-top: -15%;
}

.left {

	p:nth-child(1) {
		color: #fff;
		font-size: 14px;

		text {
			color: #fff;
			font-weight: 600;
		}
	}
	p:nth-child(2) {
		color: #fff;
		font-size: 14px;

		text {
			font-size: 20px;
			font-weight: bold;
			color: #fff;
			line-height: 27px;
			background: linear-gradient(225deg, #FFFC94 0%, #FFD400 50%, #FFFD25 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	view {
		display: flex;
		align-items: center;
		margin-top: 5px;

		image {
			width: 20px;
			margin-right: 5px;
		}

		p {
			color: #000000;
			font-size: 13px;

			text {
				font-size: 12px;
				font-weight: bold;
				color: #fff;
				line-height: 18px;
				background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

}

.line {
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.1);
	margin: 20px 0;
}

.bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;

	view {
		width: 18%;
		position: relative;

		image {
			width: 100%;
		}

		text {
			color: #fff;
			font-size: 12px;
			position: absolute;
			bottom: 10px;
			right: 5px;
			zoom: 0.8;
		}
	}
}

.gre {
	filter: grayscale(1);
}

.probox {
	padding: 20px;
	background: linear-gradient(180deg, #FAD9BF 0%, #FFFFFF 100%);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);

}

.title {
	text-align: center;
	font-size: 22px;
}

.button {
	width: 90%;
	height: 55px;
	background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
	background-size: 100% 100%;
	color: #B73800;
	font-weight: 600;
	font-size: 18px;
	margin: 0 auto;
	margin-top: 20px;
}




</style>
